<template>
	<div>
		<ReturnCloseNavbar left_arrow />
		<div class="title">
			<span class="font-size-26">{{ $route.query.register_set_password ? '设置密码' : '设置新密码' }}</span>
			<span class="font-size-14">密码长度在6~15之间，只能包含字母、数字和下划线</span>
		</div>
		<div class="form">
			<van-form validate-first @submit="onSubmit" @failed="onFailed">
				<van-field
					v-model="password"
					name="password"
					placeholder="输入新密码"
					maxlength="15"
					type="password"
					clearable
					error-message-align="right"
					:rules="[
						{ required: true, message: '请输入密码' },
						{ validator: validatorPatternPassword, message: '密码格式错误' },
					]"
				/>
				<van-field
					v-model="password_check"
					name="password"
					placeholder="确认新密码"
					maxlength="15"
					type="password"
					clearable
					error-message-align="right"
					:rules="[
						{ required: true, message: '请输入再次输入密码' },
						{ validator: validatorPatternPassword, message: '密码格式错误' },
					]"
				/>
				<div class="submit-button-agreement" v-if="$route.query.register_set_password">
					<agreement @checked="agreement_flag = !agreement_flag" />
				</div>
				<div class="submit-button" :style="{ 'margin-top': $route.query.register_set_password ? '' : '2.294686rem' }">
					<van-button round block type="default" native-type="submit">确定</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
import Agreement from './components/Agreement';
import ReturnCloseNavbar from './components/ReturnCloseNavbar';
import md5 from 'js-md5';

export default {
	name: 'index',
	props: {},
	data() {
		return {
			password: '', //密码
			password_check: '', //二次密码
			pattern_password: /^\w{6,15}$/, //密码长度在6~15之间，只能包含字母、数字和下划线
			agreement_flag: false, //协议展示标识
		};
	},
	components: {
		Agreement,
		ReturnCloseNavbar,
	},
	computed: {},
	mounted() {
		console.log(this.$route.query.register_set_password);
	},
	methods: {
		onSubmit(values) { //注册和重置密码
			if (this.password !== this.password_check) {
				this.$toast.fail('两次输入的密码不一致');
				return;
			}
			if (this.$route.query.register_set_password) {
				if (!this.agreement_flag) {
					this.$toast.fail('需勾选用户协议');
					return;
				}
				_api
					.api_userPortal_register({
						phone: this.$route.query.number,
						password: md5(this.password),
					})
					.then((data) => {
						this.$toast.success('注册成功');
						this.$router.push({ path: '/Login' });
					})
					.catch((error) => {
						this.$toast.fail('注册失败');
					});
			} else {
				_api
					.api_userPortal_resetPassword({
						phone: this.$route.query.number,
						password: md5(this.password),
					})
					.then((data) => {
						this.$toast.success('修改成功');
						this.$router.push({ path: '/Login' });
					})
					.catch((error) => {
						this.$toast.fail('修改失败');
					});
			}
		},
		onFailed(errorInfo) {
			console.log('failed', errorInfo);
		},
		validatorPatternPassword(val) {
			//密码校验
			return this.pattern_password.test(val);
		},
	},
};
</script>
<style lang='scss' scoped>
.title {
	display: flex;
	flex-direction: column;
	padding: 0.507246rem 0.531401rem 0.096618rem 0.797101rem;

	span:first-child {
		color: #333333;
	}

	span:last-child {
		color: #606060;
	}
}
.form {
	padding: 0 0.89372rem;

	.van-field {
		align-items: center;
		padding: 0;
		border-bottom: 1px solid #e9e9e9;
		margin-top: 1.014493rem;

		&::after {
			border-bottom: 0;
		}
	}

	.submit-button-agreement {
		width: 100%;
		margin: 0 auto;
		margin: 2.487923rem 0 0.386473rem 0;
	}

	.submit-button {
		.van-button--round {
			height: 1.062802rem;
			background-color: #6899f4;

			.van-button__content {
				.van-button__text {
					color: white;
				}
			}
		}
	}
}
</style>